<!-- 
  模拟 el-upload 实现的自己的 el-upload
 -->
<template>
  <div class="base-upload">
    <input ref="fileRef" type="file" :multiple="multiple" @change="handleChange" />

    <ul>
      <li v-for="(item, index) in fileList" :key="index">
        <img :src="item.url" alt="" style="width: 100px; height: 100px" />
      </li>
    </ul>

    <div @click="handleClick">
      <slot name="default"></slot>
    </div>

    <!-- <img :src="imgUrl" alt="" /> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, type Ref } from 'vue'

const props = withDefaults(
  defineProps<{
    limit?: number
    multiple?: boolean
    onExceed?: (files: File[], fileList: any[]) => void
  }>(),
  {
    limit: 5,
    multiple: false
  }
)

const fileRef = ref<HTMLInputElement | null>(null)

// 触发 input 选择文件
function chooseFile() {
  fileRef.value?.click()
}

function handleClick() {
  console.log('1111')
  chooseFile()
}

const imgUrl = ref('')

// 文件列表数组
const fileList = ref<any[]>([])

// 对 fileList 作追加
function addFiles(files: File[]) {
  console.log('addFiles', files.length)
  if (files.length === 0) return

  console.log('addFiles2')
  files.forEach((file) => {
    // 读文件
    // 1. 创建一个 FileReader 实例
    const frd = new FileReader()
    // 2. 调用 frd.readAsDataURL 方法去读取文件, 读取完成的内容是一个 base64 格式的数据
    frd.readAsDataURL(file)
    // 3. 通过 onload 事件处理，读取成功的回调
    frd.onload = () => {
      // frd.result 属性就是读取到的内容
      // console.log(frd.result)

      // 判断是否超出limit限制
      if (fileList.value.length >= props.limit) {
        // 触发 on-exceed 钩子
        props.onExceed?.(files, fileList.value)
        return
      }

      // 组装一个对象，写入到 fileList 中
      fileList.value.push({
        // 原始文件对象数据
        raw: file,
        url: frd.result
      })
    }
  })
}

// 文件选择
function handleChange(event: Event) {
  const target = event.target as HTMLInputElement
  const files: File[] = Array.from(target.files as any)

  // const file = (target.files as any)[0]

  // 将 input 清空，否则选择同一个文件，将不会触发 change 事件
  ;(fileRef.value as any).value = ''

  // 调用 addFiles 方法
  addFiles(files)

  // // 1. 创建一个 FileReader 实例
  // const frd = new FileReader()
  // // 2. 调用 frd.readAsDataURL 方法去读取文件, 读取完成的内容是一个 base64 格式的数据
  // frd.readAsDataURL(file)
  // // 3. 通过 onload 事件处理，读取成功的回调
  // frd.onload = () => {
  //   // frd.result 属性就是读取到的内容
  //   console.log(frd.result)
  //   imgUrl.value = frd.result as string
  // }
}
</script>

<style lang="scss" scoped>
.base-upload {
  input {
    opacity: 0;
  }
}
</style>
